<!-- 中部面板 -->
<template>
  <div class="view-base">
    <!-- a####### -->
    <div class="a">
      <div class="d-flex t-l">
        <div class="r-arrow">
          <img src="@/assets/images/pageCommon/r_arrow.png" alt="" />
        </div>
        <span class="t-w t-34 t-weight-600">广州市</span>
        <div class="in-select">
          <select class="ou-select t-34 t-weight-600" v-model="inSelect">
            <option class="bg-tran" value="房地产">房地产</option>
            <option class="bg-tran" value="工业">工业</option>
            <option class="bg-tran" value="基础设施">基础设施</option>
          </select>
        </div>
      </div>
      <div class="d-flex t-r">
        <div class="t-t t-weight-600">
          <div>实际完成投资</div>
          <div>
            &nbsp;&nbsp;同比60% <img src="@/assets/images/pageCommon/icon-caret-down.png" alt="" />
          </div>
        </div>
        <div class="t-num">
          <div v-for="(item, index) of '6446.46'" :key="index">
            <div v-if="!isNaN(item)" class="t-num-bg">{{ item }}</div>
            <div v-else class="t-dot">{{ item }}</div>
          </div>
          <div>亿元</div>
        </div>
      </div>
    </div>

    <!-- b####### -->
    <div class="b">
      <div class="b-d">目标投资额</div>
      <div class="b-n">10000亿</div>
      <div class="b-d b-m-l">目标完成率</div>
      <div class="b-n">78%</div>
    </div>

    <!-- c####### -->
    <div class="c">
      <!-- <div ref="chartDom" class="myChart"></div> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'
const inSelect = ref('房地产')

const chartDom = ref<any>(null)
let myChart: any = null
const doResize = () => {
  myChart.resize()
}
const chartOptions = async () => {
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: [
      {
        type: 'value',
        position: 'left' // 左侧的纵坐标轴
      },
      {
        type: 'value',
        position: 'right' // 右侧的第一个纵坐标轴
      },
      {
        type: 'value',
        position: 'right', // 右侧的第二个纵坐标轴
        offset: 60 // 偏移量，使其不与其他纵坐标轴重叠
      }
    ],
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        yAxisIndex: 0, // 与左侧的纵坐标轴关联
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      },
      {
        data: [130, 120, 150, 130, 120, 160, 140], // 添加折线图的数据
        type: 'line', // 设置为折线图类型
        yAxisIndex: 1, // 与右侧的第一个纵坐标轴关联
        lineStyle: {
          color: '#ffaa80' // 设置折线的颜色
        },
        itemStyle: {
          color: '#ffaa80', // 设置折线上数据点的颜色
          borderColor: '#ffffff'
        }
      }
    ]
  }
  return option
}
const initChart = async () => {
  if (myChart) {
    window.removeEventListener('resize', doResize)
    myChart.dispose()
    myChart = undefined
  }
  let options = await chartOptions()
  myChart = echarts.init(chartDom.value)
  myChart.setOption(options)
  window.addEventListener('resize', doResize)
}
const init = async () => {
  initChart()
}

onMounted(() => {
  nextTick(() => {
    init()
  })
})
</script>
<style lang="scss" scoped>
.view-base {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.a {
  width: 100%;
  height: 160vh * $Bh;
  background: url('@/assets/images/pageCommon/f_a.png') no-repeat;
  display: flex;
  // justify-content: space-between;
  .t-l {
    line-height: 160vh * $Bh;
  }
  // justify-content: space-between;
  .r-arrow {
    margin-left: 136vw * $Bw;
    margin-right: 21vw * $Bw;

    // display: flex;
    // width: 100%;
    // height: 100%;
    // background: url('@/assets/images/pageCommon/r_arrow.png') no-repeat;
    // background-size: 100% 100%;
    position: relative;
    &::before {
      // content: '';
      // width: 100%;
      // height: 100%;
    }
  }
  .t-w {
    color: white;
  }
  .t-34 {
    font-size: 34vh * $Bh;
  }
  .t-weight-600 {
    font-weight: 600;
  }
  .ou-select {
    height: 72vh * $Bh;
    width: 206vw * $Bw;
    padding-left: 22vw * $Bw;
    margin-left: 36vw * $Bw;
    border: 1px solid #4b7ddf;
    background-color: transparent;
    color: white;

    option {
      background-color: rgb(14, 36, 91);
    }
    .bg-tran {
      // background-color:transparent;
    }
  }
  .t-r {
    color: white;
    padding: 22vh * $Bh 0;
    font-size: 36vh * $Bh;
    margin-left: 236vw * $Bw;
    .t-t {
      width: 222vw * $Bw;
      word-spacing: 6vw * $Bw;
      // line-height: ;
    }
    .t-num {
      display: flex;
      line-height: 112vh * $Bh;
      .t-num-bg {
        width: 80vw * $Bw;
        height: 112vh * $Bh;
        font-size: 52vh * $Bh;
        font-weight: 600;
        text-align: center;
        background: url('@/assets/images/pageCommon/bg_num.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 32vw * $Bw;
      }
      .t-dot {
        margin-left: -32vw * $Bw;
        padding-left: 12vw * $Bw;
        font-size: 60vh * $Bh;
        font-weight: 600;
      }
    }
  }
}
.b {
  margin-top: 20vh * $Bh;
  height: 96vh * $Bh;
  line-height: 96vh * $Bh;
  display: flex;
  justify-content: center;
  color: white;
  background: #4b7ddf;
  background: rgba(#4b7ddf, 0.1);
  .b-d {
    font-size: 28vh * $Bh;
    margin-right: 29vw * $Bw;
  }
  .b-n {
    font-size: 37vh * $Bh;
    font-weight: 600;
  }
  .b-m-l {
    margin-left: 136vw * $Bw;
  }
}
.myChart {
  height: 300vh * $Bh;
}
.d-flex {
  display: flex;
}
</style>
